<template>
    <Modal :closable="false" v-model="visible" :title="title">
        <Form ref="form" v-if="visible" class="formList" :model="form"  :rules="rules">

            <FormItem label="物料名称" required prop="materialId">
                <Select v-model="form.materialId" placeholder="请输入物料名称`">
                <Option v-for="(item,index) in materialData" :key="index.id" :value="item.id" :label="item.materialName
"></Option>
              </Select>
              <FormItem label="数量" required prop="count">
                <Input type="number" v-model="form.count" placeholder="请输入数量" class="inputBorder"></Input>
            </FormItem>
            </FormItem>
        </Form>
        <div slot="footer" v-if="visible">
            <Button type="default" @click="closeModal">取消</Button>
            <Button type="primary" @click="handleSubmit('form')">确定</Button>
        </div>
    </Modal>
</template>

<script>
export default {
    name: "CreateOrUpdateModal",
    props: {
        visible: Boolean,
        form: Object,
        title: String,
        handleAddSubmit: Function,
        closeModal:Function,
        materialData:Array
    },
    data() {
        return {
            rules: {
                materialId: [
                    { required: true, message: '请输入物料bom版本', trigger: 'blur' }
                ],
                number: [
                    { required: true, message: '请输入数量', trigger: 'blur' }
                ], 
               
              
            },
            
        };
    },
    methods: {
        closeModal() {
           
        },
        handleSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.handleAddSubmit(formName);
                }
            })

        },
    },
};
</script>

<style  lang="scss" scoped>
::v-deep .ivu-modal-mask{
z-index: 999999 !important;
}
::v-deep .ivu-modal-wrap{
    z-index: 999999 !important; 
}
</style>